<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Live input record and playback</title>
    <style type='text/css'>
        ul { list-style: none; }
        #recordingslist audio { display: block; margin-bottom: 10px; }
    </style>
</head>
<style>
    #mask{
        width: 600px;
        background: rgba(0,0,0,0.05);
        /*padding: 3rem 0 1rem 0;*/
        /*display: none;*/
        margin: 0 auto;
        /*margin-top: 51%;*/
    }

    #mask p{
        text-align: center;
        font-size: 20px;
        color: rgba(0,0,0,0.5);
    }

    img{
        display: block;
        width:40%;
        margin: 0 auto;
    }

    .start{
        width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    #start{
        background-color: aqua;
        width: 100px;
        height: 30px;
    }

    #yuyin{
        width: 600px;
        margin: 30px auto;
        text-align: center;
    }

    #audio-container {
        width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    audio {
        display: block;
        margin: 0 auto 10px;
    }

    .result{
        width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    textarea{
        width: 400px;
        height: 300px;
    }
</style>
<body>

<script th:src="@{/js/axios.js}"></script>

<div id="mask">
    <img th:src="@{/img/a.jpg}" alt="">
    <p id="tip">点击按钮开始录音</p>
</div>

<div class="start">
    <button id="start" class="ui-btn ui-btn-primary">开始</button>
</div>

<div id="yuyin">
    语音内容：<div id="audio-container"></div>
</div>


<div class="result">
    识别结果：<textarea id="result"></textarea>
</div>



<h2>Log</h2>
<pre id="log"></pre>

<script>

    var container = document.querySelector('#audio-container');

    var mask = document.getElementById('mask');
    var start = document.querySelector('#start');
    var tip = document.getElementById('tip');
    var flag = true;


    start.addEventListener('click',function(){
        console.log(flag);
        if(flag){
            //开始录音
            startRecording(this);

        }else{
            // 结束录音
            stopRecording(this);
            // 获取 WAV 数据(Blob)

        }

        flag = !flag;
    });




    function __log(e, data) {
        log.innerHTML += "\n" + e + " " + (data || '');
    }

    var audio_context;
    var recorder;

    function startUserMedia(stream) {
        var input = audio_context.createMediaStreamSource(stream);
        __log('Media stream created.');

        // Uncomment if you want the audio to feedback directly
        //input.connect(audio_context.destination);
        //__log('Input connected to audio context destination.');

        recorder = new Recorder(input);
        __log('Recorder initialised.');
    }

    function startRecording(button) {

        recorder && recorder.record();
        // button.disabled = true;
        // button.nextElementSibling.disabled = false;
        tip.innerText="正在录音";
        start.innerHTML="再次点击结束";
        __log('Recording...');
    }

    function stopRecording(button) {
        recorder && recorder.stop();
        // button.disabled = true;
        // button.previousElementSibling.disabled = false;
        __log('Stopped recording.');


        // create WAV download link using audio data blob
        createDownloadLink();

        recorder.clear();
    }

    function createDownloadLink() {

        recorder && recorder.exportWAV(function(blob) {
            var url = URL.createObjectURL(blob);

            var audio = document.createElement('audio');
            console.log(blob);
            audio.src = url;
            audio.controls = true;
            container.appendChild(audio);

            const fileReader = new FileReader();
            fileReader.onload = (e) => {
                this.mp3Base64 = e.target.result;
                var size = blob.size;
                console.log(size);
                axios({
                    // 请求方法
                    method: 'POST',
                    url: '/test3',
                    // url参数
                    params: {
                        myData: this.mp3Base64,
                        dataSize: size
                    }
                }).then(function (response) {
                    console.log(response.data);

                    let string = response.data;
                    var textArea = document.getElementById('result');
                    // 处理成功情况
                    textArea.innerHTML = string;
                });

            };

            fileReader.readAsDataURL(blob);


            tip.innerText="点击按钮开始录音";
            start.innerHTML="开始";
        });
    }

    window.onload = function init() {
        try {
            // webkit shim
            window.AudioContext = window.AudioContext || window.webkitAudioContext;
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

            navigator.

            window.URL = window.URL || window.webkitURL;


            audio_context = new AudioContext;
            __log('Audio context set up.');
            __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
        } catch (e) {
            alert('No web audio support in this browser!');
        }

        navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
            __log('No live audio input: ' + e);
        });
    };
</script>

<script th:src="@{/js/recorder2.js}"></script>
</body>
</html>